<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar @click-left="$router.push('/personal')" title="个人信息编辑" left-arrow>
      <template #right>
        <van-icon @click="$router.push('/index')" name="wap-home-o" size="18" />
      </template>
    </van-nav-bar>
    <!-- 内容 -->
    <!-- 头像 -->
    <div class="head_img">
      <!-- <img src="https://img1.baidu.com/it/u=3063986801,2320543466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375" alt=""> -->
      <img :src="userInfo.head_img | joinPath" alt="" />
      <van-uploader :after-read="afterRead" />
    </div>
    <!-- 昵称 -->
    <van-cell
      title="昵称"
      is-link
      @click="showNameFn"
      :value="userInfo.nickname"
    />
    <van-dialog
      @confirm="changNicknameFn"
      :before-close="nicknameBeforCloseFn"
      v-model="showName"
      title="编辑昵称"
      show-cancel-button
    >
      <!-- nickname 输入框双向绑定 -->
      <van-field
        v-model.trim="nickname"
        required
        label="用户名"
        placeholder="请输入用户名"
      />
    </van-dialog>
    <!-- 密码 -->
    <van-cell @click="showpassword" title="密码" is-link value="***" />
    <van-dialog
      @confirm="changePasswordFn()"
      :before-close="passwordbeforeClose"
      v-model="showPassWord"
      title="编辑密码"
      show-cancel-button
    >
      <!-- nickname 输入框双向绑定 -->
      <van-field
        type="password"
        v-model.trim="oldpwd"
        required
        label="原密码"
        placeholder="请输入原密码"
      />
      <van-field
        type="password"
        v-model.trim="newpwd"
        required
        label="新密码"
        placeholder="请输入新密码"
      />
    </van-dialog>
    <!-- 性别 -->
    <van-cell
      @click="show = true"
      title="性别"
      is-link
      :value="userInfo.gender == 1 ? '男' : '女'"
    />
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
import imgSrc from "../assets/Snipaste_2021-12-31_15-21-02.png";
//1.1 引入用户获取用户信息接口
import { user, user_update } from "@/api/user"; //在个人页面引入两个封装的接口函数
import { upload } from "@/api/common";
import { Toast } from "vant";
export default {
  data() {
    return {
      show: false,
      actions: [
        { name: "男", gender: 1 },
        { name: "女", gender: 0 },
      ],
      // 控制昵称弹窗显示隐藏
      showName: false,
      imgSrc,
      // 用户信息
      userInfo: {},
      // 用户id
      id: localStorage.getItem("hm-id-71"),
      //声明了一个变量，用于绑定弹窗中的输入框
      nickname: "",
      showPassWord: false,
      oldpwd: "",
      newpwd: "",
      reg: /^.{3,10}$/,
    };
  },

  // 1.12 在created中调用，获取并保存数据
  created() {
    user(this.id).then((res) => {
      console.log(36, res);
      this.userInfo = res.data.data;
    });
  },
  methods: {
    // 修改性别
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
      console.log(item.name);
      if (item.name == "男") {
        this.userInfo.gender = 1;

        // 发送性别修改请求,动态效果性别
        user_update(this.id, {
          gender: this.userInfo.gender,
        }).then((res) => {
          console.log(123, res);
        });
      } else if (item.name == "女") {
        this.userInfo.gender = 0;
         // 发送性别修改请求,动态效果性别
        user_update(this.id, {
          gender: this.userInfo.gender,
        }).then((res) => {
          console.log(123, res);
        });
      }
    },

    // 修改密码
    showpassword() {
      // showPassWord修改为true让用户点击后再出现弹出框
      this.showPassWord = true;
      // if(this.userInfo.password == this.oldpwd){
      //    console.log('123');
      // }
    },
    changePasswordFn() {
      if (!this.oldpwd || !this.newpwd) {
        return this.$toast.fail("密码不能为空！");
      }
      if (this.oldpwd !== this.userInfo.password) {
        return this.$toast.fail("原密码不正确！");
      }
      if (this.oldpwd == this.newpwd) {
        return this.$toast.fail("原密码和旧密码不能一致！");
      }

      if (!this.reg.test(this.newpwd)) {
        return this.$toast.fail("新密码必须要在3到10位数之间！");
      }
      //发送新密码请求，修改密码{id:值，password:newpwd}
      user_update(this.id, {
        password: this.newpwd,
      }).then((res) => {
        console.log(131, res);
        if (res.data.message == "修改成功") {
          this.$toast.success(res.data.message);
        } else {
          this.$toast.success(res.data.message);
        }
      });
    },
    passwordbeforeClose(action, done) {
      if (
        (!this.oldpwd ||
          !this.newpwd ||
          this.oldpwd !== this.userInfo.password ||
          this.oldpwd == this.newpwd ||
          !this.reg.test(this.newpwd)) &&
        action === "confirm"
      ) {
        done(false);
      } else {
        (this.oldpwd = ""), (this.newpwd = ""), done();
      }
    },
    // 修改昵称
    changNicknameFn() {
      if (!this.nickname) {
        this.$toast.fail("昵称不可以为空");
        return;
      }
      user_update(this.id, {
        nickname: this.nickname,
      }).then((res) => {
        console.log(68, res);
        if (res.data.message == "修改成功") {
          this.$toast.success(res.data.message);
          this.userInfo.nickname = res.data.data.nickname;
          return;
        }
        this.$toast.fail(res.data.message);
      });
    },
    // 昵称弹窗关闭前触发了一个函数
    nicknameBeforCloseFn(action, done) {
      console.log(94, action);
      // 判断昵称是否为空，为空则阻止弹窗关闭，反之则成功关闭
      if (!this.nickname && action == "confirm") {
        done(false); //阻止关闭弹窗
      } else {
        done(); //关闭弹窗
      }
    },
    //   显示昵称弹框
    showNameFn() {
      (this.showName = true), (this.nickname = this.userInfo.nickname);
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log("图片上传成功", file.file);
      let fromData = new FormData();
      fromData.append("file", file.file);
      upload(fromData).then((res) => {
        console.log(61, res);
        let head_img = res.data.data.url;
        console.log(63, head_img);
        // 调用修改头像的接口函数
        user_update(this.id, {
          head_img: head_img,
        }).then((res) => {
          console.log(64, res);
          // 更新并渲染浏览器上面的头像
          this.userInfo.head_img = res.data.data.head_img;
        });
      });
    },
    // after_head_img(file){
    //     console.log('图片上传成功',file.file);
    //     // 上传图片
    // }
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-uploader {
  width: 100%;
  height: 100%;
  opacity: 0;
  .van-uploader__wrapper,
  .van-uploader__upload {
    width: 100%;
    height: 100%;
  }
}
.van-icon {
  color: #000;
}
// /deep/ 样式穿透，专门用来设置组件
/deep/ .van-nav-bar_left {
  i {
    color: #000;
  }
}
.van-nav-bar {
  border-bottom: 2px solid #ddd;
}
.head_img {
  width: 30%;
  height: 100px;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>